<template>
    <div class="goods-input">
        <template v-if="showInput">
            <base-input
                :inputProps="{
                    placeholder: 'form.placeholder.goodsInput'
                }"
                :value.sync="goodsCode"
                class="mgr-10"
                :disabled="disabled"
                @enter="fuzzySearch"
            />
            <el-button type="primary" :disabled="disabled" @click="fuzzySearch">
                {{ $t('commonWord.input') }}
            </el-button>
        </template>
        <template v-else>
            <base-input
                :inputProps="{
                    placeholder: 'form.placeholder.fuzzyGoodsFix'
                }"
                class="mgr-10"
                :value.sync="fixGoodsCode"
                @enter="fixGoodsCodeFn"
            />
            <el-button type="primary" @click="fixGoodsCodeFn">
                {{ $t('commonWord.fix') }}
            </el-button>
        </template>

        <base-dialog :dialogObj="dialogObj" class="base-dialog">
            <template v-slot:content>
                <base-input
                    :inputProps="{
                        placeholder: 'form.placeholder.goodsFielsPlaceholder',
                        suffixIcon: 'el-icon-search'
                    }"
                    :value.sync="goodsCode"
                    class="base-input"
                    @enter="fuzzySearch"
                />
                <base-table
                    :tableData="tableData"
                    :colunmData="tableHeader"
                    :tableConfig="{
                        isMultiSelect: false,
                        isIndex: true,
                        isShowOpera: false
                    }"
                    @viewDetail="viewDetail"
                />
            </template>
            <template v-slot:footerBtn>
                <!-- <div class="empty" /> -->
                <small-pagination :total="page.total" @changePage="changePage" @changePageSize="changePageSize" />
            </template>
        </base-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { DialogObj, TableHeaderConfig, PageObj } from '@/typings';
import { Prop } from 'vue-property-decorator';
import scanRequest from '@/api/common-api/scan';

@Component({
    name: 'goods-input',
    components: {
        baseInput: () => import('@/components/base-input/index.vue'),
        baseDialog: () => import('@/components/base-dialog/index.vue'),
        baseTable: () => import('@/components/base-table/index.vue'),
        smallPagination: () => import('@/components/small-pagination/index.vue')
    }
})
export default class App extends Vue {
    @Prop({ required: true }) formData;
    @Prop({ default: false }) disabled: boolean;
    @Prop() status: string;
    // @Prop() authField: RequireFilesConfig[]
    // 删除指定约束
    @Prop({
        default: () => {
            return [];
        }
    })
    cancelCheckParameter: string[];
    // 扫描类型
    @Prop({ required: false, default: 'public' }) sweepType: any;
    // 用于识别单据字段转换ids[]
    @Prop() billFiled: string;
    get showInput() {
        return !['detail', 'cancel', ''].includes(this.status);
    }
    goodsCode: string = '';
    fixGoodsCode: string = '';
    page: PageObj = {
        total: 0,
        pageCount: 1,
        pageSize: 10,
        pageNo: 1
    };
    dialogObj: DialogObj = {
        isShowDialog: false,
        title: ''
    };
    tableData: any[] = [];
    tableHeader: TableHeaderConfig[] = [
        {
            label: '货品货号',
            value: 'goodsCode',
            en: 'Item Number',
            lang: 'barcode.list.tableHeader.code'
        },
        {
            label: '货品名称',
            value: 'goodsName',
            en: 'Product Name',
            lang: 'barcode.list.tableHeader.name'
        },
        {
            label: '结算价',
            value: 'balancePrice',
            lang: 'commonWord.balancePrice'
        },
        {
            label: '助记码',
            value: 'mnemonicCode',
            lang: 'commonWord.mnemonicCode'
        }
    ];
    fixGoodsCodeFn() {
        const fixGoodsCode = this.fixGoodsCode.trim();
        this.$emit('fixGoodsCodeFn', fixGoodsCode);
    }
    async fuzzySearch() {
        const requestData = scanRequest.requestCheck(
            this.deleteCheckParameter(scanRequest.parameterConstraint[this.sweepType].browse),
            {
                keyWord: this.goodsCode,
                moduleId: this.$route.meta.moduleId,
                quantity: 1,
                ...this.formData,
                billIdList: this.billFiled ? (this.formData[this.billFiled] ? [this.formData[this.billFiled]] : undefined) : undefined
            },
            this.sweepType
        );
        if (requestData) {
            const res = await this._post({
                url: scanRequest.requestInterface(this.sweepType, 'browse'),
                data: {
                    data: requestData,
                    page: this.page.pageNo,
                    pageSize: this.page.pageSize
                }
            });
            if (res.code === 0) {
                const { total, data, pageCount, pageSize } = res;
                this.tableData = data;
                this.page = Object.assign({}, this.page, {
                    total,
                    pageSize,
                    pageCount
                });
                // 如果搜索出的结果只有一条则是精确搜索 直接往列表添加数据 否则弹出弹窗
                if (this.page.total === 1) {
                    this.$emit('goodsInput', this.tableData[0]);
                    return;
                }
                this.openDialog();
            }
        }
    }
    validateRequireFields() {}
    reset() {
        this.goodsCode = '';
    }
    // 删除指定约束条件
    deleteCheckParameter(array: string[]) {
        if (this.cancelCheckParameter) {
            this.cancelCheckParameter.forEach((em) => {
                array.splice(array.indexOf(em), 1);
            });
        }
        return array;
    }
    openDialog() {
        this.dialogObj.isShowDialog = true;
        this.dialogObj.title = this.$t('form.placeholder.goodsInput');
    }
    changePage(val) {
        this.page.pageNo = val;
        this.fuzzySearch();
    }
    changePageSize(val) {
        this.page.pageSize = val;
        this.fuzzySearch();
    }
    viewDetail(row) {
        this.dialogObj.isShowDialog = false;
        this.$emit('goodsInput', row);
    }
    // searchGoods() {
    //   this.fuzzySearch()
    // }
}
</script>

<style scoped lang="scss">
.goods-input {
    display: inline-flex;
    align-items: center;
}
.base-dialog {
    /deep/.el-dialog__body {
        padding: 20px 16px 16px 16px;
    }
    .base-input {
        width: 200px;
        margin-bottom: 12px;
    }
    /deep/ .small-pagination {
        justify-content: center;
        /deep/ .page-select {
            margin: 0 10px;
        }
    }
}
</style>
